<template>
  <div class="panelS">
      <div class="panelSHead">
          <h5 class="palenSTit">{{paneltit}}<span class="planeSNum">({{panelnum}})</span></h5>
          <a class="panelMore" href="">更多</a>
      </div>
      <div class="panelSCon">
            <div class="panelSLi" v-for="item,index in items">
                <img src="./images/person.png" width="43" height="43" alt="">
                <span class="name">黄小丫</span>
                <span class="time">13小时之前</span>
            </div>    
      </div>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
      props:{
            items:{
                type: Array,
                default: [1,1,1,1,1]
            },
            paneltit:{
                type:String,
                default:'听读'
            },
            panelnum:{
                type:Number,
                default:999
            }
      }
  };
</script>

<style lang="stylus" rel="stylesheet/stylus">
.panelS
    width: 100%
    padding:20px 15px
    box-sizing: border-box
    overflow:hidden
    background: #fff
    .panelSHead
        height:30px
        line-height:30px
        padding-bottom:5px
        .palenSTit
            float:left
            font-size:15px
            color:#414141
            .planeSNum
                color:#999
        .panelMore
                display:block
                float:right
                font-size:14px
                color:#999
                text-decoration:none
    .panelSCon
        display:flex
        width:100%
        .panelSLi
            flex:1
            font-size:12px
            img
                margin:0 auto 5px 
                display:block
            .name
                display:block
                color:#666 
                padding-bottom: 5px
                overflow:hidden
                text-align:center
            .time
                font-size:10px
                color: #b3b3b3
                display:block
                text-align:center
</style>